const path = require('path');
//引入创建html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//提取css的代码，采用link的方法连接css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//对css的代码进行压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//让打包后在一行显示（压缩）
const terserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  mode:'development',
  //打包的入口
  entry:{
    index:'./src/index.js',
    print:'./src/print.js',
  } ,
  //配置插件
  plugins: [
    new HtmlWebpackPlugin({
      title: '管理输出', //配置html的标题
      template: "./src/index.html", //以该html文件为模板
      inject: "body" //把script添加body 中
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css",
    }),
  ],
  //打包后文件的输出
  output: {
    filename: 'js/[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, //清理dist的文件夹
     //自定义图片的名字（优先级要低于：generator）
    assetModuleFilename: 'images/[hash][ext][query]'
  },

  module: {
    //配置的规则
    rules: [{
        test: /\.css$/i,
        //加载的顺序是从后面到前面
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
         //自定义图片的名字（优先级要高于：assetModuleFilename）
        generator: {
          filename: 'images/[hash][ext][query]'
        },
        //控片的大小
        // 当图片的小于8k(默认),则以inline，则打包一个BASE64的字符串嵌入bundle.js中 
        //如果图片大于8k 则以resource，打包成一个图片  
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4kb
          }
        }
      },
    ],
  },
  optimization: {
    minimize:true,
    minimizer: [
      //压缩css的代码
      new CssMinimizerPlugin(),
      //压缩js的代码
      new terserWebpackPlugin()
    ],
  },

};